<%--
  Created by IntelliJ IDEA.
  User: luliujun
  Date: 2021/7/20
  Time: 22:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发布视频</title>
    <script src="/js/jquery/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            loadParentType();
            $('#p-type-select').change(function () {
                loadSubType();
                console.log(this.value);
            });
            var video = document.getElementById('video');
            var i = setInterval(function () {
                if (video.readyState > 0) {
                    //视频时常秒
                    var duration = parseInt(video.duration);
                    $(':input[name="duration"]').val(duration);
                    clearInterval(i);
                }
            }, 200);
        });

        /**
         * 加载一级视频分类
         * @param level
         * @param selectId
         */
        function loadParentType() {
            $.ajax({
                url: '/sort/load_by_level',
                type: 'get',
                data: {level: 1},
                dataType: 'json',
                success: function (jsonData) {
                    var len = jsonData.length;
                    for (var index = 0; index < len; index++) {
                        var sort = jsonData[index];
                        var id = sort.id;
                        var type = sort.type;
                        //构建一个option选项
                        var optionHTML = '<option value="' + id + '">' + type + '</option>';
                        $('#p-type-select').append(optionHTML);
                    }
                },
                error: function () {
                    alert('加载视频一级分类数据失败!!!');
                }
            });
        }

        /**
         * 加载视频二级分类
         */
        function loadSubType() {
            var pId = $('#p-type-select').val();
            if ($.isEmptyObject(pId)) {
                return;
            }
            $('#type-select').empty();
            $('#type-select').append('<option selected  disabled>二级分类</option>');
            $.ajax({
                url: '/sort/load_sub_type',
                type: 'get',
                data: {p_id: pId},
                dataType: 'json',
                success: function (jsonData) {
                    if ($.isEmptyObject(jsonData)) {
                        alert('未加载在视频二级分类数据');
                        return;
                    }
                    var len = jsonData.length;
                    for (var index = 0; index < len; index++) {
                        var sort = jsonData[index];
                        var id = sort.id;
                        var type = sort.type;
                        //构建一个option选项
                        var optionHTML = '<option value="' + id + '">' + type + '</option>';
                        $('#type-select').append(optionHTML);
                    }
                },
                error: function () {
                    alert('加载视频二级分类数据失败!!!');
                }
            });
        }
    </script>

</head>
<body>
<video crossorigin="anonymous" id="video" src="${applicationScope.videoURLContext}${param.videoName}" width="600"
       autoplay controls></video>
<form action="/videos/publish" method="post">
    <div>
        <span>封面图片:</span>
        <img id="cover-img" width="300">
    </div>
    <div><span>视频标题:</span>:<input type="text" name="title"/></div>
    <div><span>一级分类:</span>
        <select id="p-type-select" name="style1Id">
            <option disabled>一级分类</option>
        </select>
        <span>二级分类:</span>
        <select id="type-select" name="style2Id">
            <option selected disabled>二级分类</option>
        </select>
    </div>
    <div>
        <span>视频时常(秒):</span>
        <input type="number" name="duration" readonly>
    </div>
    <div>
        <input type="hidden" name="url" value="${param.videoName}">
        <input type="hidden" name="logo">
        <button>发布视频</button>
    </div>
    <script>
        (function () {
            var video;
            var scale = 0.8;
            var initialize = function () {
                video = document.getElementById("video");
                video.addEventListener('loadeddata', captureImage);
            };
            var captureImage = function () {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var coverImg = document.getElementById('cover-img');
                //获取图片base64编码值
                var base64 = canvas.toDataURL("image/png");
                coverImg.src = base64;
                $(':hidden[name="logo"]').val(base64);
            };
            initialize();
        })();
    </script>
</form>
</body>
</html>
